<template>
    <!-- 封装整个图表的配置 -->
    <div ref="mychart" :style="{width,height}"></div>
</template>
<script>
//按需加载echarts
  import * as echarts from 'echarts/core'
  import {BarChart,PieChart,LineChart,RadarChart,BoxplotChart,SankeyChart,EffectScatterChart,LinesChart} from 'echarts/charts'
  import {TitleComponent,TooltipComponent,VisualMapComponent,DatasetComponent,GraphicComponent,
        ToolboxComponent,LegendComponent,GeoComponent} from 'echarts/components'
  import {LabelLayout,UniversalTransition} from 'echarts/features'
  import {CanvasRenderer} from 'echarts/renderers'
  import { GridComponent } from 'echarts/components';

  echarts.use([
    BarChart,
    PieChart,
    LineChart,
    RadarChart,
    BoxplotChart,
    SankeyChart,
    EffectScatterChart,
    LinesChart,
    TitleComponent,
    TooltipComponent,
    VisualMapComponent,
    DatasetComponent,
    GraphicComponent,
    ToolboxComponent,
    LegendComponent,
    GeoComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    GridComponent,
  ])


    export default{
        name:'BaseChart',
        props:{
            options:{
                type:Object,
                required:true,
                default:()=>({}),//默认值
            },
            width:{
                type:String,
                default:'100%',
            },
            height:{
                type:String,
                default:'100%',
            },
        },
        //监听options的变化
        watch:{
            options:{
                deep:true,//深度监听
                handler:function(newopyions,oldoptions){
                    this.chart.setOption(this.options);
                }
            }
        },
        mounted(){
            this.chart=echarts.init(this.$refs.mychart);
            this.chart.setOption(this.options);
            // //自动适应大小
            // window.addEventListener('resize',()=>{
            //     this.chart.resize();
            // })
            
        },
        beforeDestroy(){
           
            this.chart.dispose();
            this.chart=null;
        },
        
    }

</script>


<style>

</style>